<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<style type="text/css">
		body{
			margin: 0;
		}
		.scene{
			width: 400px;
			height: 300px;
			margin: 100px auto 0px;
			perspective: 800px;
		}
		
		.scene .box{
			width: 400px;
			height: 300px;
			transition: all ease 1s; 
			position: relative;
			transform-style: preserve-3d;
		}
		
		.scene:hover .box{
			transform: rotateY(-180deg);
		}
		
		.box .box-front{
			width: 400px;
			height: 300px;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}
		
		.box .box-back{
			width: 200px;
			height: 200px;
			background-image: linear-gradient(to bottom right,pink,#fff,skyblue);
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -100px;
			margin-top: -100px;
			transform: translateZ(-100px) rotateY(-180deg);
			font-size: 14px;
			line-height: 25px;
			padding: 20px;
			box-sizing: border-box;
			
		}
		
		.box .box-mid{
			width: 400px;
			height: 300px;
			background-color: rgba(0,0,0,0.5);
			position: absolute;
			left: 0;
			top: 0;
			transform: translateZ(-1px);
		}
	</style>
</head>
<body>
    <div class="scene">
		<div class="box">
			<div class="box-front">
				<img src="img/post-25.jpg"width="400" height="300" />
			</div>
			<div class="box-mid"></div>
			<div class="box-back">猫，猫科猫属动物，是全世界家庭中较为广泛的宠物。猫，头圆，颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩，具有夜行性，行动敏捷，善跳跃。</div>
		</div>
	</div>
</body>
</html>